<template>
  <div>
    <!-- 交易中心 -->
    <div v-if="$route.name === 'trade' || $route.name === 'embedTrade' || tradeMenu" class="tradeNav btboxbg btbox">
      <div class="flexb" style="padding-bottom: 5px;">
        <div class="firstStage">
          <template v-for="(item, index) in menuList">
            <div class="flex optional"
            v-if="item.checked === -1"
            :class="{'active': menuForChainActive === item.checked}" :key="index"
              @click="handleSelectMenuForChain(item.checked)">
              <i class="iconfont logoicon icon" style="margin-top: -1px"
              :class="menuForChainActive === -1 ? 'icon-zixuan1' : 'icon-zixuan'"></i>
              <span>{{$t('quotation.self')}}</span>
            </div>
            <div v-else :key="index"
            :class="{'active': menuForChainActive === item.checked}"
              @click="handleSelectMenuForChain(item.checked)">
              <span v-if="$appName === 'eosNewdex'">
                {{$t(`quotation.${item.area}`)}}
              </span>
              <span v-else>
                {{item.nameAbbreviation}}
              </span>
            </div>
          </template>
        </div>
        <div style="width: 80px;" class="litterSerach">
          <el-popover
            placement="bottom"
            width="80"
            trigger="focus"
            v-model="historyVisible"
            :popper-class="handleTradeClass">
            <ul class="historyList">
              <li v-for="(item, index) in historyList"
                :key="index"
                @click="handleSelectHistory(item, index)">
                {{item}}
              </li>
            </ul>
            <el-input class="littleInput"
              :placeholder="$t('public.search')"
              clearable
              @keyup.enter.native="handleSearchData"
              v-model="searchKey"
              slot="reference">
              <i slot="prefix" class="el-input__icon el-icon-search" style="width: 20px"></i>
            </el-input>
          </el-popover>
        </div>
      </div>
      <div class="secondStage flex">
        <template v-for="(item, index) in menuForChainSelect">
          <div v-if="item.nameAbbreviation!=='resource'" :class="{'active': item.active === activeIndex}" :key="index"
            @click="handleSelect(item.active)">
            {{item.nameAbbreviation}}
          </div>
          <div v-else-if="$route.name!=='embedTrade'" :class="{'active': item.active === activeIndex}" :key="index"
            @click="handleSelect(item.active)">
            {{$t(`nav.${item.nameAbbreviation}`)}}
          </div>
        </template>
      </div>
    </div>
    <!-- 行情列表 -->
    <div v-else class="marketNav">
      <div class="flexb" :style="menuForChainActive === -1 ? 'border-bottom: 1px solid #ebeef5;' : ''">
        <div class="marketFirstStage">
          <template v-for="(item, index) in menuList">
            <div class="flex optional"
            v-if="item.checked === -1"
            :class="{'active': menuForChainActive === item.checked}" :key="index"
              @click="handleSelectMenuForChain(item.checked)">
              <span v-if="menuForChainActive === -1" class="iconfont logoicon icon fontcd icon-zixuan1"></span>
              <span v-else class="iconfont logoicon icon fontcd icon-zixuan"></span>
              {{$t('quotation.selfArea')}}
            </div>
            <div v-else :key="index" class="activeTv"
            :class="{'active': menuForChainActive === item.checked, 'hasList': item.list}"
              @click="handleSelectMenuForChain(item.checked)">
              <span v-if="item.area === 'crossLink'">{{$t(`quotation.${item.area}`)}}</span>
              <span v-else>{{$appName === 'eosNewdex' ? 'EOS' : ''}} {{$t(`quotation.${item.area}`)}}</span>
            </div>
          </template>
        </div>
        <div class="selectInput" style="margin-right: 20px;">
          <el-popover
            placement="bottom"
            width="209"
            trigger="focus"
            v-model="historyVisible"
            :popper-class="handleClass">
            <ul class="historyList">
              <li v-for="(item, index) in historyList"
                :key="index"
                @click="handleSelectHistory(item, index)">
                {{item}}
              </li>
            </ul>
            <el-input
              v-model="searchKey"
              :placeholder="$t('public.search')"
              select-when-unmatched="true"
              @keyup.enter.native="handleSearchData"
              clearable
              prefix-icon="el-icon-search"
              slot="reference"
              style="width: 209px;">
            </el-input>
          </el-popover>
        </div>
      </div>
      <div class="mainList"
        v-if="menuForChainActive !== -1
        && menuForChainSelect
        && menuForChainSelect.length > 0
        && $appName === 'eosNewdex'">
        <div class="marketSecondStage flex btboxbg">
          <template v-for="(item, index) in menuForChainSelect">
            <div :class="{'active': item.active === activeIndex}" :key="index"
              @click="handleSelect(item.active)"
              v-if="item.nameAbbreviation!=='resource'">
              {{ $t(`quotation.${item.name}`) }}
              <el-tooltip placement="bottom" v-if="item.hasKnow" effect="light">
                <div slot="content" @click="handleTool" style="cursor: pointer;">
                  <template v-if="$store.state.app.language === 'ko'">
                    {{ item.nameAbbreviation }}{{$t('order.clickAbout')}}
                  </template>
                  <template v-else>
                    {{$t('order.clickAbout')}} {{ item.nameAbbreviation }}
                  </template>
                </div>
                <i class="iconfont icon-yiwen" @click.stop="handleTool"
                @mouseenter="handleToolHover(item.nameAbbreviation)"></i>
              </el-tooltip>
            </div>
            <div v-else :class="{'active': item.active === activeIndex}" :key="index"
              @click="handleSelect(item.active)">
              {{$t(`nav.${item.nameAbbreviation}`)}}
            </div>
          </template>
        </div>
      </div>
    </div>
    <a :href="whatFackChainHref" target="_blank" ref="whatFackChain"></a>
  </div>
</template>

<script>

import { parseSymbol } from '@/utils/validate';
import bus from '@/utils/bus';

export default {
  data() {
    return {
      menuForChainActive: 0, // 一级选中
      menuForChainSelect: [],
      activeIndex: 0, // 二级选中
      searchKey: '', // 搜索条件
      timeout: null,
      menuList: [],
      menuListOld: [],
      historyList: JSON.parse(localStorage.getItem('historyData')) || [], // 历史数据
      historyVisible: false,
      isClick: true, // 避免重复点击
      whatFackChainHref: '',
      tradeMenu: '', // rex和ram右边添加行情列表
      usdsList: []
    }
  },
  computed: {
    handleTradeClass() {
      return !this.historyList.length ? 'noIcon historyDataIndex' : 'historyDataIndex'
    },
    handleClass() {
      return !this.historyList.length ? 'noIcon historyData' : 'historyData'
    },
  },
  watch: {
    searchKey: function timeOut() {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.handleSearchData();
      }, 300);
    },
    '$store.state.app.trade': function change() {
      this.historyList = JSON.parse(localStorage.getItem('historyData')) || [];
      this.searchKey = '';
      this.handleMounted();
    },
  },
  created() {
    this.handleMenuListEnv();
  },
  mounted() {
    this.usdsList = this.$store.state.app.stableCode;
    this.tradeMenu = this.$route.meta.tradeMenu;
    const aindex = localStorage.getItem('menu-activeIndex');
    if (aindex && aindex.indexOf(',') < 0) {
      localStorage.setItem('menu-activeIndex', '0,0');
    }
    this.listenActions();
    this.handleMounted();
  },
  methods: {
    handleMenuListEnv() {
      this.menuList = [
        {
          area: 'selfArea',
          icon: 'icon-zixuan1',
          checked: -1,
          active: -1,
        },
        {
          area: 'mainLink', // eos主链
          checked: 0,
          list: [
            {
              name: 'eosArea',
              nameAbbreviation: 'EOS',
              icon: 'icon-eos1',
              wsData: 'eos', // ws 监听参数
              checked: 0,
              active: 0,
            },
            {
              name: 'usdtArea',
              nameAbbreviation: 'USDT',
              icon: 'icon-eos1',
              wsData: 'usdt',
              checked: 0,
              active: 4,
              hasKnow: false,
            },
            {
              name: 'usdsArea',
              nameAbbreviation: 'USDⓈ',
              icon: 'icon-eos1',
              wsData: 'usds',
              checked: 0,
              active: 1,
              hasKnow: true,
            },
            {
              name: 'resourceArea',
              nameAbbreviation: 'resource',
              icon: 'icon-eos1',
              wsData: 'resource',
              checked: 0,
              active: 3,
            },
          ]
        },
        {
          area: 'sideLink', // eos侧链
          checked: 1,
          list: [
            {
              name: 'bosArea',
              nameAbbreviation: 'BOS',
              icon: 'icon-eos1',
              wsData: 'bos',
              checked: 1,
              active: 3,
            },
            {
              name: 'telosArea',
              nameAbbreviation: 'TELOS',
              icon: 'icon-eos1',
              wsData: 'telos',
              checked: 1,
              active: 7,
            },
            {
              name: 'meetoneArea',
              nameAbbreviation: 'MEETONE',
              icon: 'icon-eos1',
              wsData: 'meetone',
              checked: 1,
              active: 4,
            },
            {
              name: 'waxArea',
              nameAbbreviation: 'WAX',
              icon: 'icon-eos1',
              wsData: 'wax',
              checked: 1,
              active: 8,
            },
            {
              name: 'lynxArea',
              nameAbbreviation: 'LYNX',
              icon: 'icon-eos1',
              wsData: 'lynx',
              checked: 1,
              active: 9,
            },
            // {
            //   name: 'enuArea',
            //   nameAbbreviation: 'ENU',
            //   icon: 'icon-eos1',
            //   wsData: 'enu',
            //   checked: 1,
            //   active: 5,
            // },
            // {
            //   name: 'fibosArea',
            //   nameAbbreviation: 'FIBOS',
            //   icon: 'icon-eos1',
            //   wsData: 'fibos',
            //   checked: 1,
            //   active: 6,
            // },
          ]
        },
        // {
        //   area: 'crossLink',
        //   icon: 'icon-zixuan1',
        //   checked: 2,
        //   active: 2,
        //   wsData: 'crossLink',
        // }
      ];
      this.menuList.forEach((v) => {
        if (v.list) {
          v.list.forEach((vv) => {
            this.menuListOld.push(vv);
          });
          return;
        }
        this.menuListOld.push(v);
      });
      if (this.$appName === 'tronNewdex') {
        this.menuList = [
          {
            area: 'selfArea',
            icon: 'icon-zixuan1',
            checked: -1,
            active: -1,
          },
          {
            area: 'usdtArea',
            nameAbbreviation: 'USDT',
            icon: 'icon-eos1',
            wsData: 'usdt',
            checked: 0,
            active: 0,
          },
          {
            area: 'tronArea',
            nameAbbreviation: 'TRON',
            icon: 'icon-eos1',
            wsData: 'trx',
            checked: 1,
            active: 0,
          },
        ]
        this.menuListOld = this.menuList;
      }
    },
    // 父级选择
    handleSelectMenuForChain(index) {
      this.menuForChainActive = index;
      if (index === -1) { // 自选
        this.handleSelect(index);
        return;
      }
      const findList = this.menuList.find(v => v.checked === index);
      if (findList.list) {
        this.menuForChainSelect = findList.list;
        this.activeIndex = this.menuForChainSelect[0].active;
      } else {
        this.menuForChainSelect = [];
        this.activeIndex = index;
      }
      this.handleSelect(this.activeIndex);
    },
    // 导航切换
    handleSelect(key) {
      this.activeIndex = key;
      let menu = null;
      if (Number(key) === -1) {
        menu = {
          name: 'selfSelection',
          nameAbbreviation: 'selfSelection',
          icon: 'icon-zixuan',
          wsData: 'selfSelection',
        }
        this.menuForChainSelect = [];
      } else {
        menu = this.menuList.find(v => v.checked === this.menuForChainActive);
        if (menu.list) {
          menu = menu.list.find(v => v.active === key);
        }
      }
      localStorage.setItem('menu-activeIndex', [this.menuForChainActive, key].toString());
      bus.$emit('handleActiveChange', menu);
    },

    handleMounted() {
      const routeName = this.$route.name;
      const params = this.$route.params;
      const aindex = localStorage.getItem('menu-activeIndex') || '0,0';
      if (aindex) {
        const getactive = aindex.split(',');
        this.menuForChainActive = Number(getactive[0]);
        this.activeIndex = Number(getactive[1]);
      }
      if (params
      && params.trade
      && (routeName === 'trade' || routeName === 'embedTrade')
      && aindex !== '-1,-1') {
        const tradeSplit = parseSymbol(params.trade, '');
        let area = tradeSplit[2].toUpperCase();
        if (area === 'FO') {
          area = 'FIBOS';
        }
        if (area === 'LNX') {
          area = 'LYNX';
        }
        if (area === 'TLOS') {
          area = 'TELOS';
        }
        if (this.usdsList.find(v => v === area)) {
          area = 'USDⓈ';
        }
        if (area === 'TRX') {
          area = 'TRON';
        }
        if (params.trade === 'eosio.token-bos-eos') { // 如果是bos跨链交易对
          this.menuForChainActive = 1;
          this.activeIndex = this.menuListOld.find(v => v.nameAbbreviation === 'BOS').active;
        } else if (params.trade === 'eosio.token-meetone-eos') { // 如果是meetone跨链交易对
          this.menuForChainActive = 1;
          this.activeIndex = this.menuListOld.find(v => v.nameAbbreviation === 'MEETONE').active;
        } else if (params.trade === 'enu.token-enu-eos') { // 如果是enu跨链交易对
          this.menuForChainActive = 1;
          this.activeIndex = this.menuListOld.find(v => v.nameAbbreviation === 'ENU').active;
        } else if (params.trade === 'eosio-fo-eos') { // 如果是fibos跨链交易对
          this.menuForChainActive = 1;
          this.activeIndex = this.menuListOld.find(v => v.nameAbbreviation === 'FIBOS').active;
        } else if (params.trade === 'eosio.token-tlos-eos') { // 如果是telos跨链交易对
          this.menuForChainActive = 1;
          this.activeIndex = this.menuListOld.find(v => v.nameAbbreviation === 'TELOS').active;
        } else if (params.trade === 'eosio.token-wax-eos') { // 如果是wax跨链交易对
          this.menuForChainActive = 1;
          this.activeIndex = this.menuListOld.find(v => v.nameAbbreviation === 'WAX').active;
        } else if (params.trade === 'eosio.token-lnx-eos') { // 如果是lynx跨链交易对
          this.menuForChainActive = 1;
          this.activeIndex = this.menuListOld.find(v => v.nameAbbreviation === 'LYNX').active;
        } else {
          if (this.$appName === 'eosNewdex') {
            if (this.menuList.find(vv => vv.area === 'mainLink').list.find(vv => vv.nameAbbreviation === area)) { // 主链区
              this.menuForChainActive = 0;
            } else { // 侧链区
              this.menuForChainActive = 1;
            }
          }
          if (this.$appName === 'tronNewdex') {
            if (area === 'TRON') {
              this.menuForChainActive = 1;
            }
            if (area === 'USDT' || area === 'USDⓈ') {
              this.menuForChainActive = 0;
            }
          }
          const findArea = this.menuListOld.find(v => v.nameAbbreviation === area);
          if (findArea) {
            this.activeIndex = findArea.active;
          }
        }
      }
      if ((routeName === 'ramExchange' || routeName === 'rexExchange' || routeName === 'cpuExchange')
      && aindex !== '-1,-1') { // 资源
        this.menuForChainActive = 0;
      }
      const items = this.menuList.find(v => v.checked === this.menuForChainActive);
      if (items) {
        this.menuForChainSelect = items.list;
      }
      this.handleSelect(this.activeIndex);
    },

    // 监听兄弟组件
    listenActions() {
      bus.$off('handleCheckNavMenu');
      bus.$on('handleCheckNavMenu', (params) => {
        // const routeName = this.$route.name;
        // if (routeName === 'trade') return;
        if (params === 'on') {
          bus.$emit('handleGetMenuList', this.menuListOld);
          return;
        }
        this.activeIndex = Number(params);
        this.handleSelect(this.activeIndex);
      });
    },

    // 选择历史记录
    handleSelectHistory(item, index) {
      if (this.isClick) {
        this.historyVisible = false;
        this.handleSearchData();
        this.historyList.splice(index, 1);
        this.historyList.unshift(item);
        this.searchKey = item;
        localStorage.setItem('historyData', JSON.stringify(this.historyList));
        this.isClick = false;
        setTimeout(() => {
          this.isClick = true;
        }, 500);
      }
    },

    // 搜索功能
    handleSearchData() {
      clearTimeout(this.timeout);
      bus.$emit('handleSearchChange', {
        searchKey: this.searchKey
      });
    },

    handleTool() {
      this.$refs.whatFackChain.click();
    },

    handleToolHover(val) {
      const hrefItems = {
        EUSD: {
          'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360024875671-%E7%A8%B3%E5%AE%9A%E5%B8%81EUSD%E4%BB%8B%E7%BB%8D',
          'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360024875671-%E7%A9%A9%E5%AE%9A%E5%B9%A3EUSD%E4%BB%8B%E7%B4%B9',
          en: 'https://newdex.zendesk.com/hc/en-us/articles/360024875671-StableCoin-EUSD-Introduce',
          ko: 'https://newdex.zendesk.com/hc/ko/articles/360024875671-StableCoin-EUSD-Introduce'
        },
        CUSD: {
          'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360024876791-%E7%A8%B3%E5%AE%9A%E5%B8%81CUSD%E4%BB%8B%E7%BB%8D',
          'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360024876791-%E7%A9%A9%E5%AE%9A%E5%B9%A3CUSD%E4%BB%8B%E7%B4%B9',
          en: 'https://newdex.zendesk.com/hc/en-us/articles/360024876791-StableCoin-CUSD-Introduce',
          ko: 'https://newdex.zendesk.com/hc/ko/articles/360024876791-StableCoin-CUSD-Introduce'
        },
        'USDⓈ': {
          'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360030722672',
          'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360030722672--USD%E2%93%88%E4%BA%A4%E6%98%93%E5%8D%80%E7%B0%A1%E4%BB%8B-',
          en: 'https://newdex.zendesk.com/hc/en-us/articles/360030722672-The-Introduction-of-USD%E2%93%88-Trading-Zone-',
          ko: 'https://newdex.zendesk.com/hc/ko/articles/360030722672-The-Introduction-of-USD%E2%93%88-Trading-Zone-'
        }
      }
      const lang = this.$store.state.app.language;
      this.whatFackChainHref = hrefItems[val][lang];
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/variables.scss";

.btboxbg {
  background: $-topcolorf7;
}

.btbox {
  padding: 5px 5px 0px;
}

.tradeNav {
  .firstStage {
    & > div {
      display: inline-block;
      border: 1px solid #D7D7D7;
      height: 24px;
      line-height: 24px;
      padding: 0px 8px;
      cursor: pointer;
      color: #999;
      border-radius: 3px;
      background: #fff;
      margin: 0 2px 0 0;
    }

    .active {
      color: #278eda;
      border: 1px solid #50A7DD;
      background: #DFE9F0;
    }

    .optional {
      padding: 0px 5px;

      .iconfont {
        display: inline-block;
        vertical-align: middle;
        font-size: 15px !important;
        margin-right: -2px;
      }
    }
  }

  .secondStage {
    & > div {
      height: 20px;
      line-height: 20px;
      margin-left: 19px;
      cursor: pointer;
    }

    & > div:first-child {
      margin-left: 8px;
    }

    .active {
      border-bottom: 2px solid #278EDA;
      color: #278EDA;
    }
  }
}

.marketNav {
  background: #fff;

  .marketFirstStage {
    font-size: 16px;
    line-height: 60px;

    & > div {
      display: inline-block;
      padding: 2px 15px;
      cursor: pointer;
      margin-left: 20px;
    }

    .active {
      position: relative;
      color: #278EDA;
    }
    .activeTv {
      position: relative;
    }
    .activeTv::after {
      content: "";
      display: none;
      position: absolute;
      bottom: -1px;
      left: 50%;
      margin-left: -10px;
      width:0;
      height:0;
      border-width:0 10px 10px;
      border-style:solid;
      border-color:transparent transparent $-topcolorf7;/*透明 透明  灰*/
    }

    .hasList.active {
      &.activeTv::after {
        display: block;
      }
    }

    .optional {
      .iconfont {
        display: inline-block;
        vertical-align: middle;
        margin-top: -4px;
      }
    }
  }

  .mainList {
    padding: 0px 20px;

    .marketSecondStage {
      padding: 8px 10px;

      & > div {
        padding: 3px 12px;
        border-radius: 3px;
        margin-left: 25px;
        cursor: pointer;
      }


      .iconfont {
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        color: #dbdbdb;
      }

      .active {
        background: #278EDA;
        color: #fff !important;

        // .iconfont {
        //   color: rgba(255, 255, 255, .95) !important;
        // }
      }
    }
  }
}
.theme-1B1D27 {
  .tradeNav {
    .firstStage {
      .active {
        color: #278eda;
      }
    }
    .firstStage > div {
      background: $-topcolor;
      border-color: #4e5b85;
      color: #7b8db9;
    }
  }
  .btboxbg {
    background: $-topcolor;
  }
  .color-fff {
    color: rgba(255, 255, 255, .8);
  }
  .marketNav {
    background: $-topcolor;
    // background: RGBA(23, 30, 74, 0.9);
    .flexb {
      border-color: rgba(255, 255, 255, .1) !important;
    }
  }
  .marketSecondStage {
    background: rgba(0, 0, 0, .22);
  }
  .active {
    &.activeTv::after {
      border-color: transparent transparent rgba(0, 0, 0, .22) !important;
    }
  }
}
</style>
